<template>
  <z-modal
    :title="'发起流程：'+(flowDef.name || '')"
    v-bind="modalOption"
    :bodyStyle="{minHeight:'500px','padding-top':'0px'}"
     @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-tabs  tab-position="left">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="file" />
            表单信息
          </span>
          <KFormBuild class="k-form-design" ref="kfb" :value="formModel" :dynamicData="dynamicData" />
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="share-alt" />
            流程图
          </span>
          <bpmnTaskViewer :xml="flowDef.source"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalMixins from '@/mixins/ModalMixins'
import { postAction, getAction } from '@/services/manage'
import { KFormBuild } from '@/components/k-form-design/packages/use.js'
import bpmnTaskViewer from '@/components/bpmn/bpmnTaskViewer'
import { getSelectDictCode, getSelectOptions } from '@/utils/k-form-design'
import { mapGetters } from 'vuex'
export default {
  name: 'ProcessStartModal',
  components: { KFormBuild, bpmnTaskViewer },
  mixins: [ModalMixins],
  data() {
    return {
      url: {
        start: '/camunda/process/start/',
        flowDef: '/camunda/process/def/'
      },
      formModel: {}, // 表单设计数据
      flowDef: {}, // 部署流程数据
      formDef: {}, // 部署流程表单数据
      flowCode: '', // 流程编码
      dynamicData: {} // 表单异步数据
    }
  },
  computed: {
    ...mapGetters('account', ['user'])
  },
  methods: {
    show(row) {
      this.flowCode = row.code
      this.getflowForm()
      this.visible = true
    },
    handleOk() {
      this.$refs.kfb.getData().then(values => {
        console.log('验证通过', values)
        this.save(values)
      }).catch(() => {
        console.log('验证未通过，获取失败')
      })
    },
    save(data) {
      data.createBy = this.user.username
      Object.keys(data).forEach(key => {
        if (typeof data[key] === 'object') {
          data[key] = JSON.stringify(data[key])
        }
      })
      postAction(this.url.start + this.flowCode, data).then(res => {
        if (res.success) {
          this.$message.success('流程发起成功')
          this.close()
          this.$emit('ok')
        }
      })
    },
    async getflowForm() { // 根据流程定义id获取绑定表单
      try {
        this.confirmLoading = true
        const res = await getAction(this.url.flowDef + this.flowCode)
        if (!res.success) {
          return this.$message.warning('未查询到流程')
        }
        const formModel = res.result.startFormModelDef && res.result.startFormModelDef.model && JSON.parse(res.result.startFormModelDef.model)

        // 必须在渲染前获取到dynamicData --start
        let dictCodes = getSelectDictCode(formModel.list)
        dictCodes = Array.from(new Set(dictCodes))
        this.dynamicData = await getSelectOptions(dictCodes)
        // -- end

        // 替换掉设计字段${nodeId}标识
        // formModel.list = replaceFormModel(formModel.list)

        this.formModel = formModel
        this.flowDef = res.result
        this.formDef = res.result.startFormModelDef
        this.confirmLoading = false
      } catch (error) {
        this.confirmLoading = false
      }
    }
  }
}
</script>
